<template>
  <el-drawer
    :title="translate('orderDetail')"
    :visible.sync="isShowModal"
    size="1000px"
    :wrapper-closable="!modalDialog"
  >
    <div class="property-title">{{ translate("orderinfo") }}</div>
    <div class="df_ac">
      <div>
        <!-- <span class="key">{{translate.orderNum}}：</span> -->
        <span class="key">{{ translate("orderId") }}：</span>
        <span class="value">{{ detail.orderId }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate.orderStatus}}：</span> -->
        <span class="key">{{ translate("orderStatus") }}：</span>
        <span class="value">{{ detail.orderStatus }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate('createTime')}}：</span> -->
        <span class="key">{{ translate("createTime") }}：</span>
        <span class="value">{{ detail.orderTime }}</span>
      </div>
      <div v-if="detail.payTime">
        <!-- <span class="key">{{translate('payTime')}}：</span> -->
        <span class="key">{{ translate("payTime") }}：</span>
        <span class="value">{{ detail.payTime }}</span>
      </div>
      <div>
        <!-- <span class="key">{{ translate("ddly") }}：</span> -->
        <span class="key">{{ translate("orderSource") }}：</span>
        <span class="value">{{ 12312312 }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate('orderPrice')}}：</span> -->
        <span class="key">{{ translate("orderPrice") }}：</span>
        <span class="value">{{ detail.orderPrice }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate('payMethod')}}：</span> -->
        <span class="key">{{ translate("payMethod") }}：</span>
        <span class="value">{{ detail.payMethod || "-" }}</span>
      </div>
      <div>
        <!-- <span class="key">{{ translate("czy") }}：</span> -->
        <span class="key">{{ translate("operator") }}：</span>
        <span class="value">{{ detail.c || "-" }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate('bz')}}：</span> -->
        <span class="key">{{ translate("bz") }}：</span>
        <span class="value">{{ detail.remake }}</span>
      </div>
    </div>

    <div class="line-style mb20" />
    <div class="property-title">{{ translate("invoiceDesc") }}</div>
    <div class="df_ac">
      <div>
        <!-- <span class="key">{{translate('invoiceStatus')}}：</span> -->
        <span class="key">{{ translate("invoiceStatus") }}：</span>
        <span class="value">{{ detail.invoiceStatus }}</span>
      </div>
      <div>
        <!-- <span class="key">{{translate('invoiceTime')}}：</span> -->
        <span class="key">{{ translate("invoiceTime") }}：</span>
        <span class="value">{{ detail.invoiceTime || "~" }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ translate("buyerInfo") }}</div>
    <div class="df_ac mt20">
      <div>
        <span class="key">{{ translate("name") }}：</span>
        <span class="value">{{ detail.memberName }}</span>
      </div>
      <div>
        <span class="key">{{ translate("contactPhone") }}：</span>
        <span class="value">{{ detail.memberPhone }}</span>
      </div>
      <div v-if="detail.memberId">
        <span class="key">{{ translate("memberIdCard") }}：</span>
        <span class="value">{{ detail.memberId }}</span>
      </div>
    </div>
    <div class="line-style mb20" />
    <div class="property-title">{{ translate("cardInfo") }}</div>

    <el-table
      :data="detail.orderDetailList"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        :label="translate('specialCardName')"
        prop="ticketMemberId"
        min-width="180"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('cardPrincipal')"
        prop="ticketName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        :label="translate('giveMoney')"
        min-width="100"
      >
        <template v-slot="scope">
          <span>{{ translate("renminbi") }}{{ scope.row.price }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('salesNum')"
        min-width="100"
      >
        <template v-slot="scope">
          <span>{{ scope.row.deposit }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('salesPrive')"
        min-width="100"
      >
        <template v-slot="scope">
          <span>{{ translate("renminbi") }}{{ scope.row.allPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="translate('status')"
        min-width="100"
      >
        <template v-slot="scope">
          <span>{{ statusMap[scope.row.status] }}</span>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="detail.detailMoneyRespParam" class="bottom_wrap">
      <div v-if="detail.detailMoneyRespParam.orderPrice" class="line">
        <span>{{ translate("orderGoodMoney") }}：</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.orderPrice || 0
        }}</span>
        <span>{{ translate("rmb") }}：</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.memberDiscount" class="line">
        <span>{{ translate("memberDis") }}：</span>
        <span v-if="detail.detailMoneyRespParam.memberDiscount">-</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.memberDiscount || 0
        }}</span>
        <span>{{ translate("rmb") }}：</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.marketingPolicy" class="line">
        <span>{{ translate("marketing") }}：</span>
        <span v-if="detail.detailMoneyRespParam.marketingPolicy">-</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.marketingPolicy || 0
        }}</span>
        <span>{{ translate("rmb") }}：</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.groupBuyCoupon" class="line">
        <span>{{ translate("groupCoupon") }}：</span>
        <span v-if="detail.detailMoneyRespParam.groupBuyCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.groupBuyCoupon || 0
        }}</span>
        <span>{{ translate("rmb") }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.discountCoupon" class="line">
        <span>{{ translate("disCoupon") }}：</span>
        <span v-if="detail.detailMoneyRespParam.discountCoupon">-</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.discountCoupon || 0
        }}</span>
        <span>{{ translate("rmb") }}</span>
      </div>
      <div v-if="detail.detailMoneyRespParam.integral" class="line">
        <span>{{ translate("integralDeduction") }}：</span>
        <span v-if="detail.detailMoneyRespParam.integral">-</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.integral || 0
        }}</span>
        <span>{{ translate("rmb") }}</span>
      </div>
      <div
        v-if="
          detail.detailMoneyRespParam.getPrice ||
          detail.detailMoneyRespParam.getPrice === 0
        "
        class="line secondColor"
      >
        <span>{{ translate("realPut") }}：</span>
        <span v-if="detail.detailMoneyRespParam">{{
          detail.detailMoneyRespParam.getPrice || 0
        }}</span>
        <span>{{ translate("rmb") }}</span>
      </div>
    </div>
  </el-drawer>
  <!--</div> -->
</template>

<script>
import { ticketOrderDetail } from '@/api'
import store from '@/store'
export default {
  data() {
    return {
      detail: {},
      modalDialog: store.getters.dialog,
      isShowModal: false, // 弹窗

      statusMap: {
        0: this.translate('useStatus0'),
        1: this.translate('useStatus1'),
        2: this.translate('useStatus2'),
        3: this.translate('useStatus3'),
        4: this.translate('useStatus4')
      }
    }
  },
  methods: {
    goBack() {
      this.$router.replace('/ticket/ticketOrder')
    },
    getDetail(orderId) {
      ticketOrderDetail({ param: { orderId } }).then((res) => {
        if (res.errorCode === '000000') {
          this.isShowModal = true
          this.detail = res.record
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.df_ac {
  flex-wrap: wrap;
  div {
    width: 33.33%;
    margin-bottom: 20px;
    .key {
      color: #666666;
      display: inline-block;
      // width: 90px;
      // text-align: right;
    }
    .value {
      color: #222;
    }
  }
}
.bottom_wrap {
  margin-top: 30px;
  text-align: right;
  .line {
    margin-bottom: 10px;
  }
}
</style>
